<template>
  <div>
    <a-button type="primary" @click="change">切换</a-button>
    <a-divider />
    <MyTransition>
      <!-- 同时也支持组件间的过渡 -->
      <div v-if="status">看我的动画效果</div>
      <div v-else>要不看看我的？</div>
    </MyTransition>
    <a-divider />
    <a-button type="primary" @click="add">添加一个</a-button>
    <a-button type="primary" @click="del">减少一个</a-button>
    <div style="height: 24px"></div>
    <MyTransitionGroup>
      <div v-for="(data, index) in dataList" :key="index" class="listClass">
        {{ data.name }}
        <a-divider />
      </div>
    </MyTransitionGroup>
  </div>
</template>
<script>
import MyTransitionGroup from "./MyTransitionGroup.vue";
import MyTransition from "./MyTransition.vue";
export default {
  components: {
    MyTransitionGroup,
    MyTransition,
  },
  data() {
    return {
      status: true,
      dataList: [
        { name: Math.random() },
        { name: Math.random() },
        { name: Math.random() },
        { name: Math.random() },
        { name: Math.random() },
      ],
    };
  },
  methods: {
    add() {
      this.dataList.push({ name: Math.random() });
    },
    del() {
      this.dataList.splice(this.dataList.length - 1, 1);
    },
    change() {
      this.status = !this.status;
    },
  },
};
</script>
